(function () {
  let hotData = [
    {
      city: "北京", // 城市
      sales: "25, 179", // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: "可爱多", num: "9,086", flag: true },
        { name: "娃哈哈", num: "8,341", flag: true },
        { name: "喜之郎", num: "7,407", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "6,724", flag: false },
        { name: "好多鱼", num: "2,170", flag: true }
      ]
    },
    {
      city: "河北",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "3,457", flag: false },
        { name: "娃哈哈", num: "2,124", flag: true },
        { name: "喜之郎", num: "8,907", flag: false },
        { name: "八喜", num: "6,080", flag: true },
        { name: "小洋人", num: "1,724", flag: false },
        { name: "好多鱼", num: "1,170", flag: false }
      ]
    },
    {
      city: "上海",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "2,345", flag: true },
        { name: "娃哈哈", num: "7,109", flag: true },
        { name: "喜之郎", num: "3,701", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "2,724", flag: false },
        { name: "好多鱼", num: "2,998", flag: true }
      ]
    },
    {
      city: "江苏",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "2,156", flag: false },
        { name: "娃哈哈", num: "2,456", flag: true },
        { name: "喜之郎", num: "9,737", flag: true },
        { name: "八喜", num: "2,080", flag: true },
        { name: "小洋人", num: "8,724", flag: true },
        { name: "好多鱼", num: "1,770", flag: false }
      ]
    },
    {
      city: "山东",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "9,567", flag: true },
        { name: "娃哈哈", num: "2,345", flag: false },
        { name: "喜之郎", num: "9,037", flag: false },
        { name: "八喜", num: "1,080", flag: true },
        { name: "小洋人", num: "4,724", flag: false },
        { name: "好多鱼", num: "9,999", flag: true }
      ]
    }
  ];

  // (1) 遍历数据
  // (2) 创建标签
  // (3) 添加到对应的容器
  hotData.forEach((obj,index)=>{
    let theLi = $(`<li class="${index === 0 ? 'active' : ''}">
                    <span>${obj.city}</span>
                    <span>${obj.sales} <s class="${obj.flag ? 'icon-up' : 'icon-down'}"></s></span>
                  </li>`)
    $('.top .sup').append(theLi)      
  })

  // (4) 遍历右侧近30日的数据 (默认取数组中第一项)
  load()

  function load(index = 0) {
    hotData[index].brands.forEach((rightObj,index)=>{
      // (5) 创建标签
      let theRightLi = $(`<li><span>${rightObj.name}</span>
                              <span>${rightObj.num} 
                                <s class="${rightObj.flag?'icon-up' :'icon-down'}"></s>
                              </span>
                      </li>`)
      // (6) 添加到对应的右侧的容器   
      $('.top .sub').append(theRightLi)             
    })
  }

  // (7) 注册鼠标移入事件
  // (8) 添加高亮
  // (9) 切换数据
  $('.top .sup li').on('mouseenter',function () {
    // 同步下标
    nowIndex = $(this).index()
    // 清空定时器
    clearInterval(t)

    $(this).addClass('active').siblings().removeClass('active')
    // 获取下标
    // let index = $(this).index()
    // 先清空再渲染
    $('.top .sub').empty()
    // 通过下标换取数据
    load(nowIndex)
  }).on('mouseleave',function () {
    // 恢复定时器
    topInterval()
  })


  let nowIndex = 0
  let t
  function topInterval() {
    t =setInterval(() => {
      nowIndex++
      if(nowIndex === $('.top .sup li').length){
        nowIndex = 0
      }
      // // 鼠标移入事件 => 清除定时器
      $('.top .sup li').eq(nowIndex).trigger('mouseenter')
      // 鼠标移出事件 => 恢复定时器
      $('.top .sup li').eq(nowIndex).trigger('mouseleave')

    }, 2000);
  }
  topInterval()
})()